<template>
    <IContent v-model="componentProps">
        <ISearch v-model="search">
            <FormItem label="产品状态" style="display: block;">
                <RadioGroup v-model="search.status" type="button" size="small" @on-change="getLists(1)">
                    <Radio label="">全部</Radio>
                    <Radio :label="0">草稿</Radio>
                    <Radio :label="1">审核</Radio>
                    <Radio :label="2">异常</Radio>
                    <Radio :label="3">正常</Radio>
                    <Radio :label="4">锁定</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="产品SKU">
                <Input v-model="search.sku" size="small"></Input>
            </FormItem>
            <FormItem label="默认条码">
                <Input v-model="search.barcode" size="small"></Input>
            </FormItem>
            <FormItem label="产品名称">
                <Input v-model="search.name" size="small"></Input>
            </FormItem>
            <FormItem label="商品编码">
                <Input v-model="search.hs_code" size="small"></Input>
            </FormItem>
            <FormItem label="品牌">
                <Input v-model="search.brand" size="small"></Input>
            </FormItem>
            <FormItem label="原产国">
                <RemoteSelect url="common/select/country" show-code size="small" v-model="search.country"></RemoteSelect>
            </FormItem>
            <FormItem :label-width="1">
                <ButtonGroup>
                    <Button type="primary" icon="ios-search" size="small" @click="getLists(1)">搜索</Button>
                    <Button type="success" icon="ios-add" size="small" @click="openComponent(`ICreate`)">添加</Button>
                    <Button type="info" icon="md-attach" size="small" @click="openComponent(`IImport`)">导入</Button>
                </ButtonGroup>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange"
                :loading="loading">
            <template slot-scope="{row, index}" slot="status">
                <span v-if="row.status === 0">草稿</span>
                <span v-if="row.status === 1">审核</span>
                <span v-if="row.status === 2">异常</span>
                <span v-if="row.status === 3">正常</span>
                <span v-if="row.status === 4">锁定</span>
            </template>
            <template slot-scope="{row, index}" slot="unit">
                <RemoteSpan :value="row.unit" url="common/select/unit"></RemoteSpan>
            </template>
            <template slot-scope="{row, index}" slot="country">
                <RemoteSpan :value="row.country" url="common/select/country"></RemoteSpan>
            </template>
            <template slot-scope="{row, index}" slot="currency">
                <RemoteSpan :value="row.currency" url="common/select/currency"></RemoteSpan>
            </template>
            <template slot-scope="{row, index}" slot="action">
                <ButtonGroup>
                    <Button size="small" v-if="row.status === 0" @click="openComponent(`IUpdate`, row)">编辑</Button>
                    <Button size="small" v-if="row.status === 2" @click="openComponent(`IUpdate`, row)">编辑</Button>
                    <Button size="small" @click="openComponent(`IIView`, row)">查看</Button>
                </ButtonGroup>
            </template>
        </ITable>
        <component slot="component" v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import IContent from "../../../../components/layout/IContent";
    import IContentMixins from "../../../../mixins/iContentMixins";
    import ISearch from "../../../../components/layout/ISearch";
    import ITable from "../../../../components/layout/ITable";
    import ICreate from './create';
    import IUpdate from './update';
    import IIView from './view';
    import IImport from './import';
    import RemoteSpan from "../../../../components/layout/RemoteSpan";
    import RemoteSelect from "../../../../components/form/remoteSelect";

    export default {
        name: "index",
        components: {RemoteSelect, RemoteSpan, ITable, ISearch, IContent, ICreate, IUpdate, IImport, IIView},
        mixins: [IContentMixins],
        data() {
            return {
                table: {
                    columns: [{
                        title: '料号',
                        key: 'unique'
                    }, {
                        title: '产品sku',
                        key: 'sku'
                    }, {
                        title: '默认条码',
                        key: 'barcode'
                    }, {
                        title: '产品名称',
                        key: 'name',
                        width: 150
                    }, {
                        title: '商品编码',
                        key: 'hs_code'
                    },{
                        title: '产品毛重',
                        key: 'weight'
                    }, {
                        title: '品牌',
                        key: 'brand'
                    },  {
                        title: '原产国',
                        slot: 'country'
                    },  {
                        title: '单位',
                        slot: 'unit'
                    },  {
                        title: '币种',
                        slot: 'currency'
                    }, {
                        title: '状态',
                        slot: 'status'
                    }, {
                        title: '操作',
                        slot: 'action'
                    }]
                },
            }
        },
        methods: {
            getLists(page) {
                this._lists(`product/index`, page);
            }
        }
    }
</script>

<style scoped>

</style>
